<template>
	<div class="point-attribute">
		<div class="point-attribute-header">
			<div class="point-attribute-left point-attribute-header-title">属性项</div>
			<div class="point-attribute-right point-attribute-header-title">属性内容</div>
		</div>
		<div class="point-attribute-item" v-for="item in atrributeData" :key="item.id">
			<div class="point-attribute-left">
				<div class="point-attribute-text" @click="onFocusName(item)" v-show="!item.editName">{{ item.name }}</div>
				<el-input size="small" class="point-attribute-input" @blur="onBlurName(item)" v-model="item.name" v-show="item.editName" />
				<div class="point-attribute-left-action point-attribute-left-action-visible" :style="{ visibility: item.editName ? 'visible' : 'hidden' }">
					<div class="iconfont" title="添加同级" @click="addAtribute">&#xe63c;</div>
					<el-popconfirm title="是否确认删除?" @confirm="confirmDelete(item)" @cancel="cancelDelete">
						<template #reference>
							<div class="iconfont" title="删除">&#xe62f;</div>
						</template>
					</el-popconfirm>
				</div>
			</div>
			<div class="point-attribute-right">
				<div class="point-attribute-text" @click="onFocusContent(item)" v-show="!item.editContent">{{ item.content }}</div>
				<el-input size="small" class="point-attribute-input" @blur="onBlurContent(item)" v-model="item.content" v-show="item.editContent" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { nanoid } from 'nanoid';

	interface Attribute {
		id: string;
		name: string;
		content: string;
		editName: boolean;
		editContent: boolean;
	}
	const atrributeData = ref<Attribute[]>([
		{
			id: nanoid(),
			name: '',
			content: '',
			editName: false,
			editContent: false
		},
	]);

	const onFocusName = item => {
		item.editName = true;
		atrributeData.value = [...atrributeData.value];
	};

	const onBlurName = item => {
		item.editName = false;
		atrributeData.value = [...atrributeData.value];
	};

	const onFocusContent = item => {
		item.editContent = true;
		atrributeData.value = [...atrributeData.value];
	};

	const onBlurContent = item => {
		item.editContent = false;
		atrributeData.value = [...atrributeData.value];
	};

	const addAtribute = () => {
		const newData = {
			id: nanoid(),
			name: '',
			content: '',
			editName: false,
			editContent: false
		};
		atrributeData.value.push(newData);
	};

	const confirmDelete = item => {
		const index = atrributeData.value.findIndex(d => d.id === item.id);
		atrributeData.value.splice(index, 1);
		if (atrributeData.value.length === 0) {
			addAtribute();
		}
	};

	const cancelDelete = () => {};
</script>

<style scoped lang="scss">
	.point-attribute {
		border: 1px solid rgba(0, 0, 0, 0.06);
		margin-bottom: 15px;
		.point-attribute-header {
			display: flex;
			height: 40px;
			text-align: center;
			width: 100%;
			background-color: #fafafa;
			.point-attribute-header-title {
				/*font-family: PingFang SC;*/
				/*font-weight: bold;*/
			}
		}
		.point-attribute-item {
			display: flex;
			height: 40px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.06);
			&:hover {
				background-color: #fafafa;
				
			}
			.point-attribute-text {
				width: 200px;
				height: 24px;
				padding: 0 12px;
				border: 1px solid transparent;
				border-radius: 3px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.point-attribute-input {
				width: 200px;
				height: 26px;
			}
		}
		.point-attribute-left {
			flex: 1;
			border-right: 1px solid rgba(0, 0, 0, 0.06);
			padding: 8px;
			display: flex;
			&:hover {
				.point-attribute-left-action-visible {
					visibility: visible !important;
				}
        .point-attribute-text {
					box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
					cursor: pointer;
				}
			}

			.point-attribute-left-action-visible {
				visibility: hidden;
			}
			.point-attribute-left-action {
				display: flex;
				align-items: center;
				margin-left: 8px;
				.iconfont {
					color: #bbb;
					padding: 0 8px;
					border-right: 1px solid #d9d9d9;
					cursor: pointer;
					&:last-child {
						border-right: none;
					}
				}
			}
		}
		.point-attribute-right {
			width: 300px;
			padding: 8px;
      &:hover{
        .point-attribute-text {
					box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
					cursor: pointer;
				}
      }
		}
	}
</style>
